import React, { Component } from "react";
import './styles/App'

class App extends Component {
    state = {
        classnames: []
    }
    changeShape = (type) => {
        let list = [...this.state.classnames];
        if (list.includes(type)) {
            list = list.filter(item => item !== type);
        } else {
            list.push(type)
        }
        this.setState({ classnames: list })
    }
    render() {
        return (
            <div className="container">
                <h2 className={this.state.classnames.join(" ")}>这里是一段文本</h2>
                <button onClick={() => this.changeShape('color')} className="btn btn-primary">更改颜色</button>
                <button onClick={() => this.changeShape('size')} className="ml-2 btn btn-danger">更改大小</button>
            </div>
        )
    }
}

export default App